<script setup lang="ts">
import { useRouter } from 'vue-router';
import { Button } from 'ant-design-vue';

const router = useRouter();
</script>
<template>
  <div
    class="error-container layout-padding lex flex-col justify-center items-center"
  >
    <img class="error-img" src="@/assets/404.svg" />
    <div class="error-wrap">
      <div class="error-title">您所访问的页面不存在！</div>
      <div class="error-msg">
        请检查您输入的网址是否正确，或点击下面的按钮返回首页。
      </div>
      <Button @click="router.push('/')" round type="primary">返回首页</Button>
    </div>
  </div>
</template>
<style scoped lang="less">
.error-container {
  flex-direction: row !important;
  .error-img {
    width: 350px;
    margin-bottom: 20px;
  }
  .error-wrap {
    margin-left: 50px;
    .error-title {
      font-size: 22px;
      font-weight: 600;
    }
    .error-msg {
      font-size: 13px;
      margin: 10px 0 30px 0;
      color: var(--el-color-info);
    }
  }
}
.layout-padding {
  border: 1px solid var(--mxg-border-color-light);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
